/* Copyright (c) 2015 - 2017, Nordic Semiconductor ASA
*
* All rights reserved.
*
* Use in source and binary forms, redistribution in binary form only, with
* or without modification, are permitted provided that the following conditions
* are met:
*
* 1. Redistributions in binary form, except as embedded into a Nordic
*    Semiconductor ASA integrated circuit in a product or a software update for
*    such product, must reproduce the above copyright notice, this list of
*    conditions and the following disclaimer in the documentation and/or other
*    materials provided with the distribution.
*
* 2. Neither the name of Nordic Semiconductor ASA nor the names of its
*    contributors may be used to endorse or promote products derived from this
*    software without specific prior written permission.
*
* 3. This software, with or without modification, must only be used with a Nordic
*    Semiconductor ASA integrated circuit.
*
* 4. Any software provided in binary form under this license must not be reverse
*    engineered, decompiled, modified and/or disassembled.
*
* THIS SOFTWARE IS PROVIDED BY NORDIC SEMICONDUCTOR ASA "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY, NONINFRINGEMENT, AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL NORDIC SEMICONDUCTOR ASA OR CONTRIBUTORS BE LIABLE
* FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
* SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
* CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
* TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

@import './variables.scss';

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.spinner {
    border-radius: 50%;
    background: linear-gradient(
        to right,
        $icon-color 10%,
        rgba(255, 255, 255, 0) 42%
    );
    position: relative;
    display: inline-block;
    animation: rotator 1.4s infinite linear;
    transform: translateZ(0);
}
.spinner:before {
    width: 50%;
    height: 50%;
    background: $icon-color;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}
.spinner:after {
    background: #fff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.core-main-view,
.core-side-panel {
    padding: 0;
}

.selectable {
    user-select: initial;
}

.nomargin {
    margin: 0px;
}

.glyphicon .form-control-feedback {
    right: 45px;
}
.icon-slim:before {
    margin: 0;
    width: auto;
}

.icon-slim.expand:before {
    margin: 0 -5px;
    width: auto;
    font-size: 21px;
}

.icon-2x {
    font-size: 200%;
}

.icon-encircled {
    border-radius: 50%;
    background-color: #333333;
    color: white;
    width: 24px;
    height: 24px;
    display: block;
    padding-left: 1px;
    padding-top: 2px;
}

.icon-foreground {
    overflow: hidden;
    position: absolute;
}

.icon-background {
    color: #dddddd;
}

.icon-rotate-90:before {
    transform: rotate(90deg);
}

.icon-rotate-270:before {
    transform: rotate(270deg);
}

.btn {
    .mdi:first-child {
        margin-right: 4px;
    }
    .mdi:last-child {
        margin-left: 4px;
    }
}

.border-box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.slidein {
    display: block;
}

#diagramContainer {
    padding: 20px;
    width: 100%;
    position: relative;
    overflow: auto;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
}

/* Normal */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
}

/* Bold */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
}

.tree-view {
    overflow-y: hidden;
}

.tree-view_item {
    /* immediate child of .tree-view, for styling convenience */
}

/* style for the children nodes container */
.tree-view_children {
    margin-left: 16px;
}

.tree-view_children-collapsed {
    height: 0px;
}

.tree-view_arrow {
    cursor: pointer;
    margin-right: 6px;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* rotate the triangle to close it */
.tree-view_arrow-collapsed {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* Component that renders log entries */
#log-entry {
    display: flex;
    flex-flow: column;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    /*width: 300px;*/
}

#log-entry > device-info,
#log-entry > status,
#log-entry > device-status,
#log-entry > service-info {
    margin: 0px;
}

#log-entry > device-info {
    display: flex;
    flex-flow: column;
    font-weight: bold;
}

#log-entry > device-status {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

#log-entry > service-info {
    display: flex;
    flex-flow: column;
}

// TODO: fix here
// #log-entry > service-info -> service-flags {
//   display:flex;
//   flex-flow: row;
// }

#log-entry > service-info > service-flags > service-flag {
    height: 20px;
    background: #aaaaaa;
    border-radius: 5px;
    text-align: center;
    overflow-y: auto;
    font-size: 14px;
    padding: 5px 10px 10px 5px;
}

#main-area-wrapper {
    background-color: $background-color;
    width: 100%;
    min-width: 930px;
}

.nav-bar {
    background-color: $brand-primary;

    .nrfconnect-logo {
        float: right;
        height: 55px;
    }

    .settings-menu {
        float: right;
        height: 55px;
        width: 40px;
        padding-top: 10px;
        font-size: large;
        color: white;
    }

    .nav-section {
        display: inline-block;
        padding: 10px 10px 0 10px;
        height: 55px;
        &.bl {
            border-left: 1px solid $brand-primary-dark;
        }
    }
}

.core-main-layout > div:nth-child(1) {
    flex: 1;
    display: flex;
    flex-flow: row;
}

.core-main-layout {
    display: flex;
    flex-flow: row;
    > div:nth-child(1) {
        flex: 1;
        display: flex;
        flex-flow: column;
        > div:nth-child(1) {
            //main
            flex: 1;
            border-top: 1px solid gray;
            box-shadow: inset -0px 0px 6px 0px gray;
        }
        > div:nth-child(2) {
            //log
            border-top: 1px solid gray;
            overflow: hidden;
        }
    }

    > div:nth-child(2) {
        //device details
        box-shadow: inset 0px 5px 6px -5px gray;
        background-color: white;
        width: 260px;
        border-top: 1px solid gray;
        border-left: 1px solid gray;
        overflow-y: auto;
    }
}

.indicator {
    display: inline-block;
    height: 11px;
    width: 11px;
    border-radius: 50%;
    border: 1px solid #645e5e;
    &.on {
        background-color: $brand-success;
    }
    &.off {
        background-color: #cfcfcf;
    }
    &.error {
        background-color: $brand-danger;
    }
}

#discoveredDevicesContainer {
    padding: 10px 15px;
    .spinner {
        margin-left: 10px;
    }

    .discovery-options-expand {
        margin-top: 3px;
        span {
            font-size: 12px;
        }
    }

    > .padded-row {
        border-bottom: 1px solid $device-details-light-border-color;
        padding-bottom: 5px;
        i {
            font-size: 14px;
        }
    }

    .discovery-options {
        label {
            font-size: 12px;
            font-weight: normal;
            margin-right: 10px;
        }
        .checkbox {
            margin-top: 5px;
            margin-bottom: 3px;
        }
        .form-control {
            width: 160px;
            height: 22px;
            font-size: 12px;
            padding-left: 10px;
        }
        .form-group {
            margin-bottom: 0px;
        }
        input {
            margin-top: 2px;
        }
    }
    .rssi-bars {
        margin-bottom: 7px;
        margin-left: 4px;
    }
}

.btn-nordic {
    border-radius: 0px;
}

#diagramContainer .device.standalone {
    box-shadow: $draggable-box-shadow;
}

.device-details-view .device.standalone,
.server-setup-view,
.bleevent-dialog-view {
    border-bottom: 1px solid $device-details-light-border-color;

    .flag-line {
        display: none;
    }
}

.device {
    border-bottom: 1px solid lightgrey;
    padding: 4px 0;
    background-color: white;
    position: relative;

    .btn-nordic {
        float: right;
    }
    .device-body {
        > div {
            margin-top: 5px;
        }

        .discovered-device-address-line {
            height: 22px;
        }
    }
    .flag-line {
        overflow: hidden;
    }

    &.standalone {
        border-bottom: none;
        padding: 0;
        width: 280px;

        .top-bar {
            background-color: #e6e6e6;
            min-height: 20px;
        }
        > div {
            padding: 4px 10px;
        }
        strong {
            font-size: 14px;
        }
        .device-body {
            padding: 4px 10px 10px 10px;

            .btn-nordic {
                float: left;
                margin-left: 10px;
            }

            .icon-dfu-button {
                width: 20px;
                height: 20px;
            }
            #dfuButton {
                width: 32px;
                height: 22px;
                padding: 1px 5px;
                margin-left: 10px;
            }

            .mdi-signal-variant {
                // advertising icon
                margin-right: 13px;
                float: right;
                font-size: 18px;
            }

            .dropdown {
                min-width: 0px;
                display: inline-block;
                .dropdown-menu {
                    li > a:focus {
                        outline: 1px solid black;
                    }
                    background-color: #ffffff;
                    li > a {
                        background-color: #ffffff;
                        color: #333333;
                    }
                    li > a:hover {
                        background-color: #e6e6e6;
                    }
                }
                > .dropdown-toggle {
                    min-width: 0;
                    padding: 0;
                }
            }

            .dropdown-toggle {
                margin-left: 5px;
                min-width: 0px;
                padding: 0px;
                border: none;
                .mdi-settings {
                    font-size: 18px;
                }
            }
        }
        .connector {
            padding: 0px;
        }
    }
    &.main-device {
        img {
            float: left;
            margin-right: 20px;
            margin-top: 25px;
            margin-left: 20px;
        }
        .device-body {
            padding-top: 20px;
        }
    }
}

.dropdown:not(core-nav-bar .dropdown) {
    padding: 0px;
    border: 0px;

    > .dropdown-toggle {
        > .caret {
            position: absolute;
            left: 90%;
            top: 45%;
        }
    }
}

.dropdown-toggle:focus {
    outline: 5px auto;
}

#dropdownUuidLookup {
    .dropdown-toggle:after {
        content: none;
    }
}

#connectionDropDown {
    .dropdown-toggle {
        margin-right: 8px;
        font-size: 1.1em;
        box-shadow: none;
        color: black;
        background-color: white;
    }

    .dropdown-toggle:hover {
        background-color: gray;
    }

    .dropdown-toggle:after {
        content: none;
    }

    .dropdown-toggle:focus {
        background-color: gray;
    }
}

.text-small {
    font-size: 13px;
}

@mixin text-smaller {
    font-size: 11px;
}

@mixin padded-row-list($margin: 5px) {
    > :not(:last-child) {
        margin-right: $margin;
    }

    > :last-child {
        margin-right: 0px;
    }
}

.padded-row {
    @include padded-row-list();
}

@mixin padded-column-list($margin: 5px) {
    > :not(:last-child) {
        margin-bottom: $margin;
    }

    > :last-child {
        margin-bottom: 0px;
    }
}

.padded-column {
    @include padded-column-list;
}

//used when tabbing and space
:focus {
    outline-color: $gray-medium-lighter !important;
}

.device-details-container {
    padding: 20px;
    overflow-y: hidden;

    .device-details-view {
        box-shadow: $draggable-box-shadow;
    }

    > div {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
    }
}

@mixin subtle-text {
    color: grey;
}
.subtle-text {
    @include subtle-text;
}

.subtler-text {
    color: $gray-medium-lighter;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item {
    box-shadow: $draggable-box-shadow;
    background-color: white;
}

@mixin flag-line {
    @include padded-row-list(2px);
}

.device-flag,
.role-flag {
    border-radius: 3px;
    font-size: 10px;
    padding: 0px 3px;
    margin-top: 1px;
    margin-bottom: 1px;
    display: inline-block;
    color: white;
}

.device-flag {
    background: $gray-lighter;
    color: black;
}

.role-flag {
    background-color: $brand-info;
    padding: 3px 15px;
}

.address-text {
    @include subtle-text;
    @include text-smaller;
}

.adv-label {
    display: inline-block;
    @include text-smaller;
    font-weight: bold;
}

.adv-value {
    display: inline-block;
    margin-left: 17px;
    @include text-smaller;
}

.adv-timeout {
    display: inline-block;
    @include text-smaller;
    width: 50px;
}

.adv-line {
    @include flag-line;
    background-color: #f8f8f8;
    margin: 3px 0px 0px 3px;
    padding: 0px 3px 0px 3px;
}

.adv-details {
    color: $gray;

    i[class^='icon-']:before {
        margin-left: 0px;
        padding-left: 0px;
        width: 8px;
    }
}

.adv-data-delete {
    border-radius: 4px;
    font-size: 12px;
    line-height: 8px;
    color: black;
    background-color: white;
}

.device-name {
    font-size: 13px;
    font-weight: bold;
}

.discovered-device-body {
    .discovered-device-address-line {
        height: 22px;
        margin-top: 5px;
    }
}

.log-wrap {
    background-color: $background-color;
    .infinite-log {
        position: relative;
        overflow-x: auto !important;
        background-color: white;
        > div {
            position: absolute;
            display: table;
            min-width: 100%;
        }
    }

    .log-entry {
        height: 20px;
        white-space: nowrap;
        background-color: white;
        display: table-row;
        min-width: 100%;
        .time,
        .message {
            display: table-cell;
            padding: 0 20px;
            border-right: 1px dotted gray;
            border-bottom: 1px dotted gray;
            height: 20px;
            line-height: 20px;
        }
        .time {
            width: 132px;
        }
    }

    .log-trace,
    .log-debug,
    .log-info,
    .log-warning {
        background-color: white;
    }
    .log-error,
    .log-fatal {
        color: $state-danger-text;
        background-color: $state-danger-bg;
    }
    .log-unknown {
        color: $state-info-text;
        background-color: $state-info-bg;
    }
    .log-header {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .log-header-text {
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        padding-left: 20px;
        font-size: 14px;
        margin: 0;
        flex: 1;
    }
    .log-header-buttons {
        align-content: flex-end;
        padding: 6px 6px 6px 0px;
    }
}

.service-name {
    font-size: 12px;
    line-height: 32px;
    float: left;
}

.server-setup {
    padding: 20px;
    height: 100%;
}

.device-details-container {
    height: 100%;
    .local-server {
        margin: 0px;
    }
}

.server-setup {
    .server-setup-view,
    .bleevent-dialog-view {
        display: flex;
        margin: 0px;
        max-width: 800px;
        height: 100%;
        box-shadow: $draggable-box-shadow;
        .server-setup-tree {
            position: relative;
            height: 100%;
            .service-items-wrap {
                max-height: calc(100vh - 441px);
                .flag-line {
                    display: none;
                }
                .editable-field {
                    display: none;
                }
                .btn-notify {
                    display: none;
                }
            }
            .server-setup-buttons {
                position: absolute;
                bottom: 0px;
                width: 100%;
                padding: 10px;
                border-top: 1px solid $device-details-light-border-color;

                .btn {
                    float: right;
                    margin-left: 5px;
                }
            }
            .device {
                border-bottom: 1px solid $device-details-light-border-color;
            }
        }
        .selected-component-editor-border {
            border-left: 8px solid $bar1-color;
        }
        .item-editor {
            flex: 1;
            min-width: 350px;
            overflow-y: auto;
            overflow-x: hidden;
            height: 100%;
            > form,
            .nothing-selected {
                height: 100%;
                padding: 20px;
            }
            .nothing-selected {
                border-left: 1px solid $device-details-light-border-color;
            }
            .uuid-lookup {
                margin-bottom: 0px;
                padding-left: 1px;
            }
            .form-horizontal .form-inline {
                margin-left: -15px;
                margin-right: -15px;
                margin-bottom: 15px;
            }
            .form-inline {
                width: 100%;
            }
            .form-list {
                padding: 0 15px;
                flex-direction: column;
                align-items: left;
            }
            .btn-toolbar .btn-nordic {
                margin-left: 5px;
            }
        }
    }
}

.bleevent-dialog {
    .server-setup-view,
    .bleevent-dialog-view {
        display: flex;
        margin: 0px;
        max-width: 800px;
        box-shadow: $draggable-box-shadow;
        .server-setup-tree {
            position: relative;
            max-height: calc(100vh - 285px);
            .service-items-wrap {
                max-height: calc(100vh - 441px);
                .flag-line {
                    display: none;
                }
                .editable-field {
                    display: none;
                }
                .btn-notify {
                    display: none;
                }
            }
            .server-setup-buttons {
                position: absolute;
                bottom: 0px;
                width: 100%;
                padding: 10px;
                border-top: 1px solid $device-details-light-border-color;

                .btn {
                    float: right;
                    margin-left: 5px;
                }
            }
            .device {
                border-bottom: 1px solid $device-details-light-border-color;
            }
        }
        .selected-component-editor-border {
            border-left: 8px solid $bar1-color;
        }
        .item-editor {
            flex: 1;
            min-width: 350px;
            overflow: auto;
            padding-bottom: 12px;

            .nothing-selected {
                border-left: 1px solid $device-details-light-border-color;
            }

            .form-group label.control-label {
                font-weight: bold;
                margin-bottom: 0;
            }
            .container .row {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }
}

.local-server .service-items-wrap {
    max-height: calc(100vh - 386px);
}
.remote-server .service-items-wrap {
    max-height: calc(100vh - 444px);
}

.device-details-view,
.server-setup-view,
.bleevent-dialog-view {
    background-color: white;
    margin: 80px 0px 0px 20px;
    .service-items-wrap {
        overflow-y: auto;
        overflow-x: hidden;
        width: 280px;
    }
    .enumerating-items-wrap {
        display: flex;
        .enumerating-content {
            width: 100%;
            padding: 4px 0px;
            border-bottom: 1px solid $device-details-light-border-color;
        }
    }
    .bar1,
    .bar2,
    .bar3 {
        width: 8px;
        border-bottom: 1px solid white;
        margin-right: 1px;
    }
    .bar1 {
        background-color: $bar1-color;
    }
    .bar2 {
        background-color: $bar2-color;
    }
    .bar3 {
        background-color: $bar3-color;
    }
    .service-item,
    .characteristic-item,
    .descriptor-item {
        padding: 0;
        display: flex;
        align-items: stretch;
        min-height: 40px;
        .expand-area {
            cursor: pointer;
            display: flex;
            .icon-wrap {
                border-bottom: 1px solid $device-details-light-border-color;
                .icon-right-dir {
                    margin-left: 2px;
                }
                .icon-down-dir {
                    margin-left: 0px;
                }
            }
        }
    }
    .icon-wrap {
        width: 8px;
        flex: 1;
        line-height: 40px;
        color: $icon-color;
    }
    .content-wrap {
        cursor: pointer;
        display: flex;
        border-bottom: 1px solid $device-details-light-border-color;
        flex: 1;

        .content {
            align-self: center;
            padding: 5px 0;
            margin-left: 8px;
            width: 100%;
            .editable {
                cursor: text;
                padding-top: 5px;
                &:hover span {
                    background: $gray-lighter;
                }
                > span {
                    min-width: 86%; // TODO: Should we do more precise math?
                    max-width: 86%; // Other elements will take more/less relative space with/out scrollbar
                    display: inline-block;
                }
            }
            .btn {
                padding: 0 1px 0 1px;
                margin-right: 5px;
                float: right;
                font-size: 12px;
                > img {
                    width: 32px;
                    height: 32px;
                }
            }
            textarea {
                //border: 0;
                min-width: 86%;
                max-width: 86%;
                font-size: 10px;
                background-color: $gray-lighter;
            }
        }
    }
    .characteristic-item,
    .descriptor-item {
        .content-wrap {
            font-size: 11px;
        }
        .error-label {
            margin: 1px 3px 1px -3px;
            padding: 2px 2px 2px 3px;
            border: 1px solid $device-details-light-border-color;
            background-color: $bar1-color;
        }
        .hide {
            display: none;
        }
    }

    .add-new {
        display: flex;
        font-size: 11px;
        color: $icon-color;
        &:hover,
        &:hover .icon-wrap {
            color: $bar2-color;
        }
        .icon-wrap {
            margin-right: 5px;
            line-height: 10px;
        }
    }
}

.connection-info-button {
    z-index: 1;
    font-size: 14px;
    &.btn-xs {
        padding: 0px;
        border-radius: 15px;
    }
    &:hover {
        /*box-shadow: 0px 0px 6px rgba(200,200,200,1);*/
    }
    .icon-encircled:hover {
        color: $gray-medium1-lighter;
    }
    .icon-encircled:active {
        color: $gray-medium-lighter;
    }
}
.editable-field {
    .tooltip {
        box-shadow: 0px 3px 6px #e2e2e2;
        $arrow-size: 6px;
        padding: 5px 10px;
        opacity: 1;
        margin: 0;
        bottom: $arrow-size;
        .tooltip-arrow {
            border-top-color: $alert-danger-border;
            bottom: -1 * $arrow-size;
        }
    }
    .alert-wrap {
        position: relative;
    }
    .editable-field-editor-wrap {
        font-size: 0;
        > * {
            font-size: 11px;
        }
    }
    .subtle-text {
        padding-top: 5px;
    }
}

.nordic-form-control {
    margin-top: 4px;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-right: 0px;
    height: 25px;
    border-radius: 0;
}

.nordic-form-group {
    margin-bottom: 10px;
}

.row-of-buttons {
    display: flex;
    justify-content: flex-end;
    margin-right: 12px;
    margin-bottom: 12px;
}

.text-right {
    text-align: right !important;
    justify-content: flex-end !important;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}
.popover-content {
    padding: 0px;
    form {
        margin: 5px 10px;
    }
    .form-group {
        margin-bottom: 5px;
    }
    button {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    label {
        text-align: left !important;
        font-weight: normal;
    }
}

.connection-request-modal {
    width: 60%;
    .form-group {
        display: flex;
        justify-content: space-around;
        align-items: center;
        input[type='number'] {
            width: 60px;
            display: inline;
        }
        > div > label {
            margin-right: 8px;
        }
    }
}

.popover {
    border-radius: $border-radius-small $border-radius-small 0px 0px;
    padding: 0px;
    .spinner {
        margin-left: 25px;
    }
    .popover-title {
        background-color: $window-top-bar-color;
        border-radius: $border-radius-small $border-radius-small 0px 0px;
    }
    .connection-parameters {
        margin: 4px 4px 4px 4px;
        display: inline-block;
    }
    .connection-parameter-label {
        margin-bottom: 4px;
    }
    .connection-parameter-value {
        text-align: right;
        margin-bottom: 4px;
    }
}

.connection-info-popover {
    .popover-body {
        font-size: 0.875rem;
        padding: 0px;
    }
}

.security-param-modal {
    .btn-nordic {
        float: left;
        margin-left: 10px;
    }
    .row {
        align-items: center;
    }
    .form-label {
        font-weight: bold;
    }
    .align-baseline {
        align-self: baseline;
    }
    .nothing-selected {
        border-left: none;
    }
}
.adv-param-modal {
    .btn-nordic {
        float: left;
        margin-left: 10px;
    }
    .row {
        align-items: center;
    }
    .form-label {
        font-weight: bold;
    }
    .align-baseline {
        align-self: baseline;
    }
    .nothing-selected {
        border-left: none;
    }
}

.events-modal {
    .modal-dialog {
        min-width: 60%;
    }
    .modal-title {
        border-bottom: none;
    }
    .modal-footer {
        border-top: none;
    }
    .device-details-view,
    .server-setup-view,
    .bleevent-dialog-view {
        margin-left: 4px;
        margin-right: 4px;
        margin-bottom: 0px;
        margin-top: 0px;
        max-width: none;
        .service-items-wrap {
            width: 230px;
            .content {
                display: flex;
                align-items: center;
                margin-left: 0px;
                [class^='icon-']:before {
                    margin-right: 0px;
                    margin-left: 0px;
                }
            }
        }
        .item-editor {
            .container {
                padding-left: 0;
                padding-right: 0;
                .row {
                    align-items: center;
                }
            }
            border-left: 1px solid #cfcfcf;
            .event-header {
                padding-top: 9px;
                border-bottom: 1px solid #cfcfcf;
                text-align: center;
                font-weight: bold;
            }
            .form-horizontal {
                margin-top: 20px;
                padding-bottom: 2px;
                border-bottom: 1px solid #cfcfcf;
                .btn-nordic {
                    float: right;
                    margin-top: 15px;
                    margin-left: 15px;
                }
                .form-group {
                    margin-right: 15px;
                }
            }
            .form-label {
                font-weight: bold;
            }
            .align-baseline {
                align-self: baseline;
            }
            .nothing-selected {
                border-left: none;
            }
        }
    }
}

.success-item {
    background-color: $gray-lighter;
    color: $brand-success;
    pointer-events: none;
}

.failed-item {
    background-color: $gray-lighter;
    color: $brand-danger;
    pointer-events: none;
}
.left-space {
    margin-left: 5px;
}

.countdown-timer {
    font-size: 1.6em;
    margin-left: 30px;
}

@mixin nordic-dropdown {
    min-width: 220px;
    text-align: left;
    .dropdown-menu {
        li > a:focus {
            outline: 1px solid black;
        }
        background-color: #ffffff;
        li > a {
            background-color: #ffffff;
            color: #333333;
        }
        li > a:hover {
            background-color: #e6e6e6;
        }
    }
}

.adv-setup {
    .adv-col {
        display: flex;
        flex-flow: column;
        align-items: stretch;
    }
    .adv-row {
        display: flex;
        flex-flow: row;
        justify-content: center;
    }
    .adv-pkt,
    .scan-rsp-pkt {
        flex: 1;
        margin: 10px;
    }
    .type-label {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .adv-drop-container,
    .adv-value-container {
        display: inline-block;
        vertical-align: top;
        margin: 10px;
    }
    .adv-value-container {
        width: 340px;
    }
    .form-group {
        width: 100%;
    }
    table {
        width: 100%;
    }
    .btn-add {
        margin-bottom: 20px;
        align-self: center;
    }
    .adv-header {
        margin-bottom: 10px;
        font-weight: bold;
    }
    .adv-table-container {
        padding: 10px;
        border: 1px solid lightgray;
    }
    .form-group {
        display: inline-block;
    }
    .adv-dropdown {
        @include nordic-dropdown;
    }
    .adv-uuid-lookup {
        margin-left: 4px;
    }
    .error-label {
        margin: 5px;
        padding: 5px;
    }
    .modal-dialog {
        max-width: 900px;
    }
}

.dfu-dialog {
    .progress {
        width: 100%;
        height: 18px;
        margin-top: 2px;
    }
    .form-label {
        font-weight: bold;
    }
    .input-group {
        align-self: center;
        pre {
            display: block;
            padding: 9px;
            margin: 0 0 10px;
            font-size: 13px;
            line-height: 1.42857143;
            color: #333333;
            word-break: break-all;
            word-wrap: break-word;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    }
    .row-of-buttons {
        margin-right: 0;
    }
}

.scroll-menu {
    overflow-x: auto;
    max-height: 300px;
    top: 34px;
    width: 300px;
}

.uuid-lookup {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 22px;
    .dropdown-toggle {
        margin-left: 0px;
        min-width: 0px;
        padding: 2px 2px 3px 2px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
        span[class^='icon-'] {
            font-size: 18px;
            padding: 3px;
        }
    }
}

.uuid-dropdown {
    @include nordic-dropdown;
    min-width: 0px;
}

.top-spacer {
    margin-top: 10px;
}

.serialSerialnumber {
    font-size: $font-size-small;
}

.brand-background {
    background-color: $bar1-color;
}

.neutral-background {
    background-color: #ffffff;
}

.pull-right {
    float: right;
}

#main-menu,
.core-log-header-buttons {
    .mdi:last-child {
        margin-left: 0;
    }
    .mdi:first-child {
        margin-right: 0;
    }
}

.advertising-setup-footer {
    justify-content: space-between;

    div > button:not(:first-of-type) {
        margin-left: 8px;
    }
}
